<!--
 * @Author: windys
 * @Description: 录播
 * @Date: 2022-03-09 15:21:26
-->
<template>
  <van-action-sheet v-model:show="show" title="直播回看">
    <div class="content" v-if="list.length">
      <div
        class="item"
        v-for="item in list"
        :key="item.csTabId"
        @click="handleClick(item)"
      >
        <div class="left">
          <van-image
            :src="item.coverUrl"
            radius="5px"
            width="120"
            fit="contain"
          />
        </div>
        <div class="right">
          <div class="title">{{ item.title }}</div>
          <div class="total" style="font-size: 10px">
            {{ item.viewPersons }}人观看
          </div>
          <div class="time">
            {{ filterTime(item.startTime) }}~{{ filterTime(item.endTime) }}
          </div>
        </div>
      </div>
    </div>
    <div class="content no_data" v-else>
      <img src="../../assets/img/nodata.png" alt="" srcset="" />
      <p>暂无数据</p>
    </div>
  </van-action-sheet>
</template>



<script >
import { defineComponent, ref, watch } from "vue";
import { getLookBackList } from "@/api/live";
import { useRoute, useRouter } from "vue-router";
import filter from "@/utils/filter";
import storage from "../../utils/storage";
export default defineComponent({
  setup(props,{emit}) {
    const show = ref(false);
    const { filterTime } = filter();

    const route = useRoute();
    const list = ref([]);
    const init = async (id) => {
      const res = await getLookBackList({
        pageIndex: 1,
        pageSize: 100,
        liveId: route.query.liveId,
        csTabId: id,
      });

      if (res && res.length) {
        list.value = res;
      }
    };

    const router = useRouter();
    const handleClick = (item) => {
      if (route.path === "/lookback") {
        router.push({
          path: "/lookback",
          query: {
            type: item.type,
            csTabId: item.csTabId,
            liveId: item.liveId,
            from: location.hash,
          },
        });
        emit('handleChangeLookBack')
      } else {
        router.push({
          path: "/lookback",
          query: {
            type: item.type,
            csTabId: item.csTabId,
            liveId: item.liveId,
            from: location.hash,
          },
        });
        storage.setSession('prePath',route.fullPath)
      }
    };
    return {
      show,
      init,
      list,
      filterTime,
      handleClick,
    };
  },
});
</script>

<style lang="scss" scoped>
.content {
  min-height: 200px;
  max-height: 400px;
  overflow-y: auto;
  margin: 10px;
  .item {
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    height: 60px;
    font-size: 14px;
    padding: 5px;
    border-bottom: 1px solid #e9e3e3;
    .left {
      width: 120px;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .right {
      width: calc(100% - 120px);
      padding-left: 10px;
      .title {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #000;
        font-weight: bolder;
      }
      .total {
        color: #999;
        margin: 2px 0;
        font-size: 10px;
      }
      .time {
        font-size: 8px;
        margin-top: 5px;
      }
    }
  }
}
.no_data {
  margin-top: 50px;
}
</style>
